<template>
  <div class="editData">
    <div class="editData_model">
      <el-form
        ref="form"
        label-width="80px"
        :model="form"
        :rules="rules"
        class="editData_model__form"
      >
        <el-form-item label="头像" prop="headPortrait">
          <el-upload
            class="avatar-uploader"
            action="http://digitaleconomylib.com/api/auth/upload_avatar"
            :headers="{ Authorization: operator.token }"
            accept="image/jpg,image/jpeg,image/gif,image/png,image/bmp"
            :on-success="handleAvatarSuccess"
            :show-file-list="false"
          >
            <el-image
              v-if="imageUrl"
              :src="imageUrl"
              fit="cover"
              class="avatar"
            ></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="手机号码" prop="telephone">
          <el-input
            v-model.trim="form.telephone"
            placeholder="请输入手机号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input
            v-model.trim="form.nickname"
            placeholder="请输入昵称"
          ></el-input>
        </el-form-item>
        <el-form-item prop="email" label="电子邮箱">
          <el-input
            v-model="form.email"
            placeholder="请输入电子邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item prop="school" label="学校">
          <el-input v-model="form.school" placeholder="请输入学校"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updata" :loading="loading"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Mixin from "@/mixins/form";
import { mapState } from "vuex";

export default {
  name: "editData",
  mixins: [Mixin],
  components: {},
  filters: "",
  data() {
    return {
      rules: {
        nickname: [{ message: "请输入昵称", trigger: "blur" }],
        telephone: [
          {
            message: `请输入正确的手机号码`,
            trigger: "blur",
          },
          {
            pattern:
              /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/,
            message: "手机号码格式不正确",
          },
        ],
        email: [
          {
            message: `${this.config.root.input}电子邮箱`,
            trigger: "blur",
          },
          {
            pattern:
              /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: "电子邮箱格式不正确",
          },
        ],
      },
      imageUrl: "",
    };
  },
  created() {},
  computed: {
    ...mapState("user", {
      operator: "operator",
    }),
  },
  methods: {
    // 上传成功回调
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    async updata() {
      // 表单验证
      const status = this.$formValidate();
      if (status) {
        let result = await this.$put("api/user/update", this.form);
        if (result.code === 200) {
          this.$message.success("更新成功");
          this.$router.replace("/");
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.editData {
  height: calc(100vh - 130px);
  background-color: $white;
  display: flex;
  align-items: center;
  justify-content: center;

  .editData_model {
    padding: 30px;

    ::v-deep .avatar-uploader {
      .el-upload {
        border: 1px dashed $c1c1c1;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;

        &:hover {
          border-color: $ccc;
        }
      }

      .avatar {
        width: 80px;
        height: 80px;
        display: block;
      }

      .avatar-uploader-icon {
        font-size: 28px;
        color: $ccc;
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
      }
    }
  }
}
</style>
